import React, {useState, useEffect} from 'react'
import Table from '@/components/table/Table'
import { Space, Modal, Button, Row, Col, Input } from 'antd';
// import Form from './../sanke/form'
// import RoomForm from '@components/Form/Form'
import Detail from './../sanke/detail'
import Search from '@/components/serch/index'
import Add from '../neibin/add'
interface IProps {

}
interface IState {
  list: any[],
  visible: boolean,
  titleName: string,
  form: any
}
interface validateForm {
  userName?: string,
  passWord?: number
}
const Sanke = (props:any, ref: any)=>{
  // const {Option} = Select
  // let child: any = useRef() // 表单组件返回的form
  const [isAdd, setisAdd] = useState<boolean>(false) // 新增编辑开关
  const [list, setlist] = useState<any>([]) // 列表数据
  const [visible, setvisible] = useState(false) //弹窗开关
  const [titleName, settitleName] = useState('新增') // 标题名
  // const [form, setform] = useState<validateForm>({})  // 初始化表单
  const [isDetail, setIsDetail] = useState<boolean>(false)  // 是否展示详情
  const [width, setWidth] = useState<number>(500)  // 初始化表单
  const [info, setinfo] = useState<string>('');
  const [detailInfo, setdetailInfo] = useState<any>({});
  // const formVal = [ // 表单配置表
  //   {
  //     label: '选择房间',
  //     name: 'userName',
  //     rules: [{ required: true, message: '请输入用户名' }],
  //     render:<Input />
      
  //   },
  //   {
  //     label: '入住天数',
  //     name: 'passWord',
  //     rules: [{ required: true, message: '请输入密码' }],
  //     render:<Input />
      
  //   }
  // ]  
  // const formVal = [ // 表单配置表
  //   {
  //     label: '选择房间',
  //     name: 'userName',
  //     rules: [{ required: true, message: '请输入用户名' }],
  //   render: <Select allowClear><Option value="jack">Jack</Option><Option value="lucy">Lucy</Option></Select>
      
  //   }
  // ] 
  const columns = [
    {
      title: '访问房间',
      dataIndex: 'roomNum',
      key: 'roomNum',
      align: 'center',
      width: '100px'
    }, 
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '120px',
      fixed: 'left',
      render: (text: any) => <span>{text}</span>,
    },    
    {
      title: '来访时间',
      dataIndex: 'startTime',
      key: 'startTime',
      align: 'center',
      width: '200px'
    },   
    {
      title: '离店时间',
      dataIndex: 'endTime',
      key: 'endTime',
      align: 'center',
      width: '200px'
    },   
    {
      title: '核验 / 认证结果',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: '150px'
    },        
    {
      title: '证件号码',
      dataIndex: 'idCardNo',
      key: 'idCardNo',
      align: 'center',
      fixed: 'left',
      width: '240px',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      align: 'center',
      width: '70px',
      render: (text: any) => <span>{text}</span>,
    },
    {
      title: '民族',
      dataIndex: 'nation',
      key: 'nation',
      align: 'center',
      width: '70px'
    },
    {
      title: '出生日期',
      dataIndex: 'birthday',
      key: 'birthday',
      align: 'center',
      width: '120px',
    },
    {
      title: '户籍地市县区',
      dataIndex: 'address',
      key: 'address',
      align: 'left',
      width: '300px'
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
      width: '100px'
    },                  
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: '280px',      
      align: 'center',
      render: (record: any) => (
        <Space size="small">
          <Button size='small' type='link' onClick={()=>detail(record)}>查看访客</Button>
          <Button size='small' type='link' onClick={()=>edit(record, 'checkIn')}>访客入住</Button>
          <Button size='small' type='link' onClick={()=>edit(record, 'checkOut')}>访客离店</Button>
        </Space>
      ),
    },
  ]
  const searchList = [
    {
      render:()=>{
        return <Row>
          <Col span={4} className='ml10' >
            <Input placeholder={'酒店名称'}></Input>
          </Col>
          <Col span={3} className='ml10' >
            <Input placeholder={'房型查询'}></Input>
          </Col>
          <Col span={5} className='ml10' >
            <Input placeholder={'姓名 / 证件号码 / 性别 / 民族查询'}></Input>
          </Col>      
          <Col span={4} className='ml10' >
            <Input placeholder={'入住状态'}></Input>
          </Col>            
          <Col span={4} className='ml10' >
            <Button className='mb20' type='primary'>搜索</Button>
          </Col>                                
        </Row>
      }
    },
  ]  
  const edit = (record: any, name: string = 'edit')=>{
    // 办理入住
    setIsDetail(false)
    settitleName(name == 'checkIn' ? '访客入住' : '访客离店')
    setWidth(600)
    setvisible(true)
    setinfo(`${record.roomNum} 的访客 ${record.name} 将${name == 'checkIn' ? '办理入住' : '操作离店'}， 是否确定${name == 'checkIn' ? '入住？' : '离店？'}`)
  }
  const detail =  (record: any)=>{
    // 核验详情
    settitleName('查看信息')
    setdetailInfo(record)
    setIsDetail(true)
    setWidth(1000)
    setvisible(true)
  }
  const handleOk = (e: any)=>{
    // 表单submit
    setvisible(false)
    
  }
  const handleCancel = ()=>{
    //取消
    setvisible(false)
  }  
  const goAdd = (val: any) =>{
    // 开启表单
    setisAdd(val)
  }
  useEffect(() => {
    let string:any= localStorage.getItem('sankeList')
    if(string) {
      let arr:any = JSON.parse(string)
      setlist([...arr])
    }   
  }, [])
  
  return (
    <div>
      {
        isAdd ? <Add></Add> :
        <>
          <Search add={goAdd} selectSpan={24} searchList={searchList}/>
          <Table columns={columns} list={list}/>
            <Modal
            getContainer={false}
            title={titleName}
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            width={width}
          >
            {
              !isDetail ? <span>{info}</span> : <Detail detailInfo={detailInfo}></Detail>
            }
          </Modal>
        </>   
      }                 
    </div>
)  
}

export default Sanke